<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />
		<meta name="format-detection" content="telephone=no"> 
		<title>${plan.planName }—H5CASE</title>
		<link rel="stylesheet" href="<%=path %>/wap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=path %>/wap/css/public.css" />
		<link rel="stylesheet" href="<%=path %>/wap/css/font-awesome.css" />
		<link rel="stylesheet" href="<%=path %>/wap/css/swiper.min.css" />
	</head>
	<body>
		<div class="tb-logo" style="">
	    	<span class="float-l pic" ><a href="<%=path %>/wap/index.html"><img src="<%=path %>/wap/img/logo.png" alt="" /></a></span>
	    	<div class="tb-srch">
		    	<span class="shuru"></sp><input type="text" id="planName" onblur="search();"/></span>
		    	<span class="fa fa-search btn" onclick="search();" aria-hidden="true"></span>
		    </div>
	    </div>
	    <div class="dt-t">
	   	    <p>${plan.planName }</p>
	   	    <span class="fa fa-tag float-l sc"></span>
		    <span class="float-l" id="tag">${plan.planTag }</span>		   		    
		    <%-- <span class="float-r gz">${plan.planHot }</span>
		    <span class="fa fa-heart-o sc float-r"></span> --%>
		    <span class="float-r pr">${plan.planWatch }</span>
		    <span class="fa fa-eye sc float-r"></span>
	    </div>
	    <div class="dt-lb">
	    	<div class="swiper-container">
			    <div class="swiper-wrapper" id="imgs">
			    <div style="display:none" id="planPics">${plan.planPics }</div>
				 <%--    <div class="swiper-slide"><img src="<%=path %>/wap/img/1.jpg" alt="" /></div>
				    <div class="swiper-slide"><img src="<%=path %>/wap/img/2.jpg" alt="" /></div>
				    <div class="swiper-slide"><img src="<%=path %>/wap/img/3.jpg" alt="" /></div>
				    <div class="swiper-slide"><img src="<%=path %>/wap/img/4.jpg" alt="" /></div>
				    <div class="swiper-slide"><img src="<%=path %>/wap/img/iu.jpg" alt="" /></div>
				    <div class="swiper-slide"><img src="<%=path %>/wap/img/4.jpg" alt="" /></div>
				    <div class="swiper-slide"><img src="<%=path %>/wap/img/2.jpg" alt="" /></div> --%>
			    </div>
			</div>
			<div class="btn-groups">
                <a href="${plan.planUrl }">
                    <div class="btn">
                        <span>播放作品</span>
                    </div>
                </a>
                <a href="#">
                    <div class="btn">
                        <span>定制咨询</span>                                                            
                    </div>
                </a>
           </div>
	    </div>
	    <div class="dt-xq">
	    	<h4>${plan.planCompnay}
	    		<span class="float-r dzx-num">${plan.planHot }</span>
		        <span class="fa fa-heart-o float-r dzx"></span>
	    	</h4>
	    	<p>${plan.planDescription }</p>
	    </div>
	     <%-- <div class="footer1">
	    	<div class="footer1-bd">
	    		<div class="we">
	    			<span>合作联系电话：13321889270</span>
			        <span><img src="<%=path %>/wap/img/xz-logo.png" alt="" width='5%'/></span>
	    		</div>
	    		<p class="bq">
	    			版权说明：网站所展示样例内容，均属于作者所有，由原作者拥有版权。未经版权方书面授权，请勿作他用，维权必究！
	    		</p>
	    	</div>
	    </div> --%>
	    <div class="dz-tc">
	    	<div class="bd-tc">
	    		<div class="titou">
	    			制作咨询
	    			<span class="fa fa-times"></span>
	    		</div>
	    		<div class="neir">
	    			<form id="orderForm">
		    			<div class="input">
		    			    <span class="fa fa-user-o" ></span>
		    			    <input type="text" id="orderName" name="orderName" placeholder="请输入您的姓名"/>
		    			</div>
		    			<div class="input">
		    			    <span class="fa fa-mobile dt-p" ></span>
		    			    <input type="text" id="orderPhone" name="orderPhone" placeholder="请输入您的电话号码"/>
		    			</div>
		    			<div class="textarea">
		    				<textarea name="orderDescription" id="orderDescription" cols="30" rows="4" placeholder="请输入您的制作需求"></textarea>
		    			</div>
		    			<div style="display:none">
		    				<input type="hidden" name="orderPlanId" value="${plan.planId }">
		    				<input type="hidden" name="orderPlanTitle" value="${plan.planName }">
		    			</div>
		    			<div class="tj-btn">
		    				提&nbsp;&nbsp;交
		    			</div>
	    			</form>
	    		</div>
	    		<div class="ft-lx">
	    			<span class="s-left">联系我们</span>
	    			<span class="s-right">
	    				<div class="lx">
							<span><img src="<%=path %>/wap/img/phone.png" alt="" /></span>
							<span>13321889270(沈经理)</span>
						</div>
						<div class="lx">
							<span><img src="<%=path %>/wap/img/qq.png" alt="" /></span>
							<span>13321889270</span>
						</div>
						<div class="lx">
							<span><img src="<%=path %>/wap/img/email.png" alt="" /></span>
							<span>eric.shen@xuanzhen-tech.com</span>
						</div>
	    			</span>
	    		</div>
	    	</div>
	    </div>
	   	<script type="text/javascript" src="<%=path %>/wap/js/jquery-2.2.3.min.js" ></script>
	   	<script type="text/javascript" src="<%=path %>/wap/js/swiper.min.js" ></script>
	   	<script type="text/javascript" src="<%=path %>/wap/js/layer.js" ></script>
	   	<script type="text/javascript" src="<%=path %>/front/js/jquery-form.js" ></script>
	   	<script>
	   		var basePath = "${pageContext.request.contextPath }";
		  
	   		$('.fa-heart-o').click(function(){
	   			var gzText=parseInt($('.dzx-num').text());
				$(this).addClass('fa-heart').removeClass('fa-heart-o');
				$('.dzx-num').text(1+gzText);
				$('.fa-heart').css('color','red');
					var _this =  $(this);
					var planId = "${plan.planId}";
					$.ajax({
							type:"POST",
							url:basePath+"/front/addLike.html",
							data:{planId:planId},
							dataType:"json",
							success:function(json){
								if (json==1) {
									layer.open({
										content: '点赞成功！'
											,skin: 'msg'
												,time: 1 //2秒后自动关闭
									});
								}else{
									layer.open({
										content: '点赞失败！'
											,skin: 'msg'
												,time: 1 //2秒后自动关闭
									});
								}
							},
							error:function(){
								layer.open({
								    content: '点赞失败！'
								    ,skin: 'msg'
								    ,time: 1 //2秒后自动关闭
								  });
							}
					});
			})
			function ani(){
				var mySwiper = new Swiper('.swiper-container', {
				   	loop : true,
					effect : 'coverflow',
					slidesPerView: 2,
					centeredSlides: true,
					coverflow: {
					            rotate: 30,
					            stretch: 10,
					            depth: 60,
					            modifier: 2,
					            slideShadows : true
					        }
				})
		   		var imgHeight=$('.dt-lb .swiper-slide img').width()*1.64;
		   		$('.dt-lb .swiper-slide img').height(imgHeight);
		   		$('.btn-groups .btn').eq(1).click(function(){
		   			$('.dz-tc').show()
		   		})
		   		$('.fa-times').click(function(){
		   			$('.dz-tc').hide()
		   		})
	   		}
	   	</script>
	   	<script type="text/javascript">
	    window.onload = function () {
	    	tagBuild();
	    	picsBuild();
	    	ani();
         }; 
	   		
		   	function tagBuild(){
		   		var lengt = $("#tag").text().split(",");
				var tag = "";
				for (var i = 0; i < lengt.length; i++) {
					if (lengt[i] == '') {
						lengt[i]=" ";
					}
					tag+=lengt[i]+'	';
				}
				$("#tag").text(tag);
			}
		   	
		   	function picsBuild(){
		   		var pics =$("#planPics").text();
		   		var params = pics.split(",");
		   		var html = '';
		   		for(var i=0;i<params.length;i++){
		   			if (params[i]!='' & params[i]!=null & params[i]!='undefined') {
		   				html+="<div class='swiper-slide'>"
		   					+"<img src='"+basePath+"/file/getImg.html?saveAddress="+params[i]+"' alt='' />" 
		   					+"</div>"
		   			}
		   		}
		   		$("#imgs").append(html);
		   	}
		   	
		  //提交
			$('.tj-btn').click(function(){
				var orderName = $("#orderName").val(); 
				var orderPhone = $("#orderPhone").val(); 
				var orderDescription = $("#orderDescription").val(); 
				if (orderName.replace(/(^s*)|(s*$)/g, "").length ==0){ 
					layer.open({
					    content: '请填入姓名'
					    ,skin: 'msg'
					    ,time: 1 //2秒后自动关闭
					  });
				}else 
				if (orderPhone.replace(/(^s*)|(s*$)/g, "").length ==0){ 
					layer.open({
					    content: '请填入联系方式'
					    ,skin: 'msg'
					    ,time: 1 //2秒后自动关闭
					  });
				}else
				if (orderDescription.replace(/(^s*)|(s*$)/g, "").length ==0){ 
					layer.open({
					    content: '请填入具体描述'
					    ,skin: 'msg'
					    ,time: 1 //2秒后自动关闭
					  });
				}else{
				//alert(basePath+'/order/addOrder.html');
				//$('#orderForm').submit();
				 $('#orderForm').ajaxSubmit({
						type: 'POST',
						url: basePath+'/order/addOrder.html',
						success: function(){
							layer.open({
							    content: '提交成功'
							    ,skin: 'msg'
							    ,time: 1 //2秒后自动关闭
							  });
						},
						error:function(){
							layer.open({
							    content: '提交失败'
							    ,skin: 'msg'
							    ,time: 1 //2秒后自动关闭
							  });
						},
						//clearForm: true,
						resetForm: true
						});
				/* 	$("#orderDescription").val('');
					$("#orderName").val("");
					$("#orderPhone").val(''); */
					$('.dz-tc').hide();
				}
			})
			function search(){
				var search = $("#planName").val();
				window.location.href = basePath+"/wap/index.html?name="+search;
		 	}
	   	</script>
	</body>
</html>
